<template>
  <div class="container">
    <!--  主题内容标题   -->
    <div class="flex contain-header">
      <div class="contain-title">用户基本信息</div>
    </div>
    <!--  基本信息显示    -->
    <div class="info-contain">
      <div>
        <a-avatar :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+data.userFace" :size="70"/>
        <div class="userName">{{ data.userName }}</div>
      </div>
      <div class="info-content">
        <a-row type="flex" justify="center" :gutter="24" class="row-style">
          <a-col :span="8">
            <icon-svg name="iconhot" class="nav-icon"/>
            <div class="title text_center">帖子发起数</div>
            <div class="title text_center num-style">{{ data.postNum }}个</div>
          </a-col>
          <a-col :span="8">
            <icon-svg name="iconshoucang" class="nav-icon"/>
            <div class="title text_center">粉丝数</div>
            <div class="title text_center num-style">{{ data.fansNum }}个</div>
          </a-col>
          <a-col :span="8">
            <icon-svg name="iconguanzhu" class="nav-icon"/>
            <div class="title text_center">关注数</div>
            <div class="title text_center num-style">{{ data.followNum }}个</div>
          </a-col>
        </a-row>
        <a-row type="flex" justify="center" :gutter="24" class="row-style">
          <a-col :span="10" :offset="1">
            <span class="title">用户ID：</span>
            {{ data.userId }}
          </a-col>
          <a-col :offset="1" :span="10">
            <span class="title">真实姓名：</span>
            {{ data.userRealname }}
          </a-col>
        </a-row>
        <a-row type="flex" justify="center" :gutter="24"  class="row-style">
          <a-col :span="10" :offset="1">
            <span class="title">性别：</span>
            {{ data.userSex === 1 ? '男' : '女'}}
          </a-col>
          <a-col :offset="1" :span="10">
            <span class="title">身份：</span>
            {{ data.userRole === 0 ? '学生' : '老师'}}
          </a-col>
        </a-row>
        <a-row type="flex" justify="center" :gutter="24"  class="row-style">
          <a-col :span="10" :offset="1">
            <span class="title">学校：</span>
            {{ data.stSchool }}
          </a-col>
          <a-col :offset="1" :span="10">
            <span class="title">学院：</span>
            {{ data.stCollege }}
          </a-col>
        </a-row>
        <a-row type="flex" justify="center" :gutter="24"  class="row-style">
          <a-col :span="10" :offset="1">
            <span class="title">班级：</span>
            {{ data.stClass }}
          </a-col>
          <a-col :offset="1" :span="10">
            <span class="title">学号：</span>
            {{ data.stNo }}
          </a-col>
        </a-row>
      </div>
      <div class="form-contain">
        <div class="form-title">收藏记录</div>
        <a-row type="flex" justify="center" :gutter="24" class="row-style">
          <a-col :span="8" class="border-right">
            <div class="title text_center">资料</div>
            <div class="title text_center num-style">{{ data.collectMatNum }}个</div>
          </a-col>
          <a-col :span="8" class="border-right">
            <div class="title text_center">课件</div>
            <div class="title text_center num-style">{{ data.collectCouNum }}个</div>
          </a-col>
          <a-col :span="8">
            <div class="title text_center">软件</div>
            <div class="title text_center num-style">{{ data.collectSofNum }}个</div>
          </a-col>
        </a-row>
      </div>
      <div class="form-contain record-space">
        <div class="form-title">资源上传记录</div>
        <a-row type="flex" justify="center" :gutter="24" class="row-style">
          <a-col :span="8" class="border-right">
            <div class="title text_center">资料</div>
            <div class="title text_center num-style">{{ data.resourceMatNum }}个</div>
          </a-col>
          <a-col :span="8" class="border-right">
            <div class="title text_center">课件</div>
            <div class="title text_center num-style">{{ data.resourceCouNum }}个</div>
          </a-col>
          <a-col :span="8">
            <div class="title text_center">软件</div>
            <div class="title text_center num-style">{{ data.resourceSofNum }}个</div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
  import {getUserInfo} from "@/api";
  export default {
    name: "UserInfo.vue",
    data() {
      return{
        data: {
          userName: 'Elaine cc',
          userId: '43645657',
          actualName: '苏奕娜',
          gender: '女',
          identity: '学生',
          university: '五邑大学',
          college: '智能制造学部',
          class: '200738班',
          classNumber: '3220000719',
          postsNum: '30',
          fansNum: '22',
          followsNum: '90'
        }
      }
    },
    components: {

    },
    created() {
      this.getInfo()
    },
    methods: {
      getInfo() {
        let _this = this
        let params = {
          userId: window.localStorage.getItem('userId')
        }
        getUserInfo(params)
          .then((res) => {
            if (res.status == 200) {
              _this.data = res.data
              console.log('yonghu', _this.data)
            } else {
              this.$message.info(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .flex{
    display: flex;
    flex-direction: row;
  }
  .container{
    width: 1032px;
    height: 100%;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    padding: 5px 13px;
  }
  .contain-header{
    justify-content: space-between;
    align-items: center;
  }
  .contain-title{
    font-family: MicrosoftYaHei;
    font-size: 18px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 1px;
    color: #1bcbb4;
  }
  .contain-left{
    align-items: center;
    cursor: pointer;
  }
  .title{
    font-weight: 600;
    font-size: 16px;
    margin-right: 10px;
  }
  .info-contain {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px !important;
    color: #686767;
  }
  .userName {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    margin-top: 8px;
  }
  .text_center {
    text-align: center;
  }
  .info-content {
    width: 600px;
  }
  .row-style {
    margin-top: 18px;
  }
  .nav-icon{
    color: #999999;
    font-size: 20px;
    text-align: center;
  }
  .num-style {
    color: #1bcbb4;
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
  }
  .num-style:hover {
    color: #65dbcb;
  }
  .form-contain {
    width: 600px;
    padding: 0px 20px 20px 20px;
    border-radius: 10px;
    border: 1px solid #1bcbb4;
    margin: 50px 0px;
  }
  .form-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    border-bottom: 1px solid #97f3e9;
  }
  .border-right {
    border-right: 1px solid #d6dcdc;
  }
  .record-space {
    margin-top: 10px;
  }

</style>
